<template>
  <div class="report-container">
    <div class="report-title">
      <h1>管壳车间设备看板</h1>
    </div>
    <div class="report-main">
      <div class="report-left">
        <div class="left-table">
          <p>设备运行参数异常</p>
          <div class="table-header">
            <div class="item-line">
              <div class="line-column col-1">设备编号</div>
              <div class="line-column col-2">设备名称</div>
              <div class="line-column col-3">设备参数</div>
              <div class="line-column col-4">设备状态</div>
            </div>
          </div>
          <div ref="tableContent" class="table-content">
            <template v-for="(item, index) in tableData">
              <div :key="index" class="item-line">
                <div class="line-column col-1">{{ item.deviceNo }}</div>
                <div class="line-column col-2">{{ item.deviceName }}</div>
                <div class="line-column col-3">{{ item.parameters }}</div>
                <div class="line-column col-4">
                  {{
                    item.deviceStatus === '3' ? '报警' : (item.deviceStatus === '4' ? '关机断网' : (item.deviceStatus === '6' ? '紧急停机' : (item.deviceStatus === '8' ? '机床异常' : '其他异常')))
                  }}
                </div>
              </div>
            </template>
          </div>
        </div>
        <SimEcharts height="49%" class="e-chart-border" :chart-data="nightingalePieData"/>
      </div>
      <div class="report-right">
        <div class="right-top">
          <div class="top-statistics">
            <div class="title">
              <div class="tit-col" style="border-right: 1px solid rgba(0, 255, 255, 0.07);">设备总数<br><span
                  class="font-white">{{ statisticInfo['设备总数'] }}</span></div>
              <div class="tit-col">联网设备<br><span class="font-white">{{ statisticInfo['联网设备'] }}</span></div>
            </div>
            <div class="content">
              <div class="content-line">
                <div class="con-col">日点检率<br><span class="font-white">{{ statisticInfo['日点检率'] }}</span></div>
                <div class="con-col" style="border-right: 1px solid rgba(0, 255, 255, 0.07);">日保养率<br><span
                    class="font-white">{{ statisticInfo['日保养率'] }}</span></div>
                <div class="con-col">运行<br><span class="font-green">{{ statisticInfo['设备状态']['运行'] }}</span></div>
                <div class="con-col">待机<br><span class="font-warning">{{ statisticInfo['设备状态']['待机'] }}</span></div>
              </div>
              <div class="content-line">
                <div class="con-col">月维修数<br><span class="font-white">{{ statisticInfo['月维修数'] }}</span></div>
                <div class="con-col" style="border-right: 1px solid rgba(0, 255, 255, 0.07);">月巡检数<br><span
                    class="font-white">{{ statisticInfo['月巡检数'] }}</span></div>
                <div class="con-col">离线<br><span class="font-info">{{ statisticInfo['设备状态']['离线'] }}</span></div>
                <div class="con-col">报警<br><span class="font-red">{{ statisticInfo['设备状态']['报警'] }}</span></div>
              </div>
            </div>
          </div>
          <div class="top-fix-time">
            <SimEcharts height="100%" class="e-chart-border" :chart-data="userDefinedBarData"/>
          </div>
        </div>
        <SimEcharts height="49%" class="e-chart-border" :chart-data="basicLineData"/>
      </div>
    </div>
  </div>
</template>

<script>
import {connectWebsocket, sendMessage} from "@/api/websocket";
import {
  barData,
  basicLineData,
  nightingalePieData,
  userDefinedBarData
} from '@/api/service-module/dashBoard/echartsData'

export default {
  name: 'CellPackingDeviceDashBoard',
  data() {
    return {
      nowDate: '',
      tableData: [],
      statisticInfo: {
        '日保养率': '',
        '日点检率': '',
        '月维修数': '',
        '月巡检数': '',
        '联网设备': '',
        '设备总数': '',
        '设备状态': {
          '待机': '',
          '报警': '',
          '离线': '',
          '运行': ''
        }
      },
      barData: JSON.parse(JSON.stringify(barData)),
      nightingalePieData: JSON.parse(JSON.stringify(nightingalePieData)),
      userDefinedBarData: JSON.parse(JSON.stringify(userDefinedBarData)),
      basicLineData: JSON.parse(JSON.stringify(basicLineData))
    }
  },
  created() {
    this.timer = setInterval(this.initData, 15 * 1000)
    this.initWebData()
    this.reloadWeb()
  },
  mounted() {
    this.formatDate()
  },
  destroyed() {
    window.clearInterval(this.timer)
  },
  methods: {
    initWebData() {
      connectWebsocket(
          // 测试地址
          //'ws://192.168.12.24:20088/CellPackingWebSocket/tube',
          process.env.VUE_APP_WS_URL + '/CellPackingWebSocket/tube',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            this.queryParametersException(JSON.parse(data).parametersException4)
            this.queryFaultAnalysis(JSON.parse(data).faultAnalysis4)
            this.queryDeviceStatistics(JSON.parse(data).deviceStatistics4)
            this.queryWeiXiuTimes(JSON.parse(data).maintenanceFrequency4)
            this.queryOperatingRatio(JSON.parse(data).operatingRatio4)
          },
          () => {
            sendMessage("Im tired!")
          }
      )
      /*this.queryParametersException()
      /!* 停机top、故障top *!/
      this.nightingalePieData.title[0].text = '停机Top5、故障Top3'
      this.nightingalePieData.title[1].subtext = ''
      this.nightingalePieData.title[2].subtext = ''
      this.nightingalePieData.series[0].name = '停机Top5'
      this.nightingalePieData.series[0].radius = window.innerWidth > 1024 ? [80, 120] : [50, 70]
      this.nightingalePieData.series[0].center = window.innerWidth > 1024 ? ['50%', '50%'] : ['50%', '60%']
      this.nightingalePieData.series[1].name = '故障Top3'
      this.nightingalePieData.series[1].radius = window.innerWidth > 1024 ? [0, 50] : [0, 20]
      this.nightingalePieData.series[1].center = window.innerWidth > 1024 ? ['50%', '50%'] : ['50%', '60%']
      this.queryFaultAnalysis()
      /!* 设备信息统计 *!/
      this.queryDeviceStatistics()
      /!* 维修次数 *!/
      this.userDefinedBarData.title.text = '维修次数'
      this.queryWeiXiuTimes()
      /!* 有效利用率 *!/
      this.basicLineData.title.text = '有效利用率'
      this.queryOperatingRatio()
      this.formatDate()*/
    },
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    queryParametersException(data) {
      this.tableData = data
    },
    queryFaultAnalysis(data) {
      this.nightingalePieData.title[0].text = '停机Top5、故障Top3'
      this.nightingalePieData.title[1].subtext = ''
      this.nightingalePieData.title[2].subtext = ''
      this.nightingalePieData.series[0].name = '停机Top5'
      this.nightingalePieData.series[0].radius = window.innerWidth > 1024 ? [80, 120] : [50, 70]
      this.nightingalePieData.series[0].center = window.innerWidth > 1024 ? ['50%', '50%'] : ['50%', '60%']
      this.nightingalePieData.series[1].name = '故障Top3'
      this.nightingalePieData.series[1].radius = window.innerWidth > 1024 ? [0, 50] : [0, 20]
      this.nightingalePieData.series[1].center = window.innerWidth > 1024 ? ['50%', '50%'] : ['50%', '60%']
      const colors = ['#409EFF', '#1CA261', '#FFCD43', '#FF2525', '#2DC4D2', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
      this.nightingalePieData.series[0].data = data.outage.map((item, index) => {
        return {
          value: item.num,
          name: item.device_name,
          label: {
            color: colors[index]
          }
        }
      })
      this.nightingalePieData.series[1].data = data.fault.map((item, index) => {
        return {
          value: item.num,
          name: item.andon_detail,
          label: {
            color: colors[index]
          }
        }
      })
    },
    queryDeviceStatistics(data) {
      this.statisticInfo = data
    },
    queryWeiXiuTimes(data) {
      this.userDefinedBarData.title.text = '维修次数'
      const colors = ['#409EFF', '#1CA261', '#FFCD43', '#FF2525', '#2DC4D2', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
      this.userDefinedBarData.xAxis.data = data.map(item => {
        return item.day
      })
      this.userDefinedBarData.series[0].data = data.map((item, index) => {
        return {
          value: item.num,
          itemStyle: {
            color: colors[index]
          }
        }
      })
    },
    queryOperatingRatio(data) {
      this.basicLineData.title.text = '有效利用率'
      const xAxis = [];
      const series = []
      for (const day in data) {
        xAxis.push(day)
        series.push(data[day])
      }
      this.basicLineData.xAxis.data = xAxis
      this.basicLineData.series[0].data = series
    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    }
  }
}
</script>

<style lang="scss" scoped>
/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      h3 {
        margin-top: 6px;
        margin-bottom: 0;
      }

      p {
        margin-top: 0;
      }
    }

    .report-main {
      height: calc(100% - 52px);
      padding: 0 10px;
      display: flex;

      .report-left {
        width: 36%;
        height: 100%;

        .left-table {
          color: #20a0ff;
          height: 49%;
          border: 1px solid rgba(0, 255, 255, 0.12);
          margin-bottom: 1%;

          p {
            padding: 4px 4px;
            margin: 0;
            font-weight: bolder;
            font-size: 14px;
          }

          .table-header {
            color: #FFF;
            font-weight: bolder;

            .item-line {
              border-top: 1px solid rgba(0, 255, 255, 0.39);
              min-height: 32px;
              display: flex;
            }
          }

          .table-content {
            color: #20a0ff;
            height: calc(100% - 60px);
            overflow: hidden;
            font-size: 12px;

            .item-line {
              display: flex;
            }
          }

          .line-column {
            padding: 2px 4px;
            border: 1px solid rgba(0, 255, 255, 0.47);
            word-break: break-word;
          }

          .col-1 {
            width: 25%;
          }

          .col-2 {
            width: 35%;
          }

          .col-3 {
            width: 35%;
          }

          .col-4 {
            width: 15%;
          }
        }
      }

      .report-right {
        margin-left: 1%;
        width: 63%;
        height: 100%;

        .right-top {
          height: 49%;
          display: flex;
          margin-bottom: 1%;

          .top-statistics {
            width: 49%;
            height: 100%;
            border: 1px solid rgba(0, 255, 255, 0.19);
            margin-right: 1%;

            .title {
              height: 30%;
              color: #20a0ff;
              font-size: 24px;
              font-weight: bolder;
              display: flex;

              .tit-col {
                width: 50%;
                text-align: center;
              }
            }

            .content {
              color: #20a0ff;
              font-size: 18px;
              font-weight: bolder;
              height: 70%;

              .content-line {
                height: 50%;
                display: flex;

                .con-col {
                  width: 25%;
                  text-align: center;
                }
              }
            }

            .font-white {
              color: #FFF;
            }

            .font-green {
              color: #00a65a;
            }

            .font-warning {
              color: #FFBA00;
            }

            .font-red {
              color: #F56C6C;
            }

            .font-info {
              color: #909399;
            }
          }

          .top-fix-time {
            width: 50%;
          }
        }
      }
    }

    .e-chart-border {
      border: 1px solid rgba(0, 255, 255, 0.23);
      margin-bottom: 1%;
    }
  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      h3 {
        margin-top: 6px;
        margin-bottom: 0;
      }

      p {
        margin-top: 0;
      }
    }

    .report-main {
      height: calc(100% - 52px);
      padding: 0 10px;
      display: flex;
      margin-top: 3.8rem;

      .report-left {
        width: 36%;
        height: 100%;

        .left-table {
          color: #20a0ff;
          height: 49%;
          border: 1px solid rgba(0, 255, 255, 0.07);
          margin-bottom: 1%;

          p {
            padding: 4px 4px;
            margin: 0;
            font-weight: bolder;
            font-size: 14px;
          }

          .table-header {
            color: #FFF;
            font-weight: bolder;
            text-align: center;
            line-height: 32px;

            .item-line {
              border-top: 1px solid rgba(0, 255, 255, 0.18);
              min-height: 32px;
              display: flex;
            }
          }

          .table-content {
            color: #20a0ff;
            height: calc(100% - 60px);
            overflow: hidden;
            font-size: 12px;
            text-align: center;

            .item-line {
              display: flex;
            }
          }

          .line-column {
            padding: 2px 4px;
            border: 1px solid rgba(0, 255, 255, 0.38);
            word-break: break-word;
          }

          .col-1 {
            width: 25%;
          }

          .col-2 {
            width: 35%;
          }

          .col-3 {
            width: 35%;
          }

          .col-4 {
            width: 15%;
          }
        }
      }

      .report-right {
        margin-left: 1%;
        width: 63%;
        height: 100%;

        .right-top {
          height: 49%;
          display: flex;
          margin-bottom: 1%;

          .top-statistics {
            width: 49%;
            height: 100%;
            border: 1px solid rgba(0, 255, 255, 0.12);
            margin-right: 1%;

            .title {
              height: 30%;
              color: #20a0ff;
              font-size: 24px;
              font-weight: bolder;
              display: flex;

              .tit-col {
                width: 50%;
                text-align: center;
              }
            }

            .content {
              color: #20a0ff;
              font-size: 18px;
              font-weight: bolder;
              height: 70%;

              .content-line {
                height: 50%;
                display: flex;

                .con-col {
                  width: 25%;
                  text-align: center;
                }
              }
            }

            .font-white {
              color: #FFF;
            }

            .font-green {
              color: #00a65a;
            }

            .font-warning {
              color: #FFBA00;
            }

            .font-red {
              color: #F56C6C;
            }

            .font-info {
              color: #909399;
            }
          }

          .top-fix-time {
            width: 50%;
          }
        }
      }
    }

    .e-chart-border {
      border: 1px solid rgba(0, 255, 255, 0.07);
      margin-bottom: 1%;
    }
  }
}
</style>
